js中操作数组的方法有哪些?

来源:博客站 01月24日 12:01

在 JavaScript 中,有许多内置的方法可以用来操作数组。这些方法大致可以分为几类:创建和修改数组、查找和遍历数组、以及数组的其他操作。以下是一些常用的数组操作方法:

创建和修改数组

  1. Array.from()

    • 创建一个新的数组实例,从一个类似数组或可迭代对象中创建一个新的、浅拷贝的数组实例。
    const arrayLike = { 0: 'a', 1: 'b', length: 2 };
    const arr = Array.from(arrayLike);
    console.log(arr); // ['a', 'b']
    
  2. Array.of()

    • 创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。
    const arr = Array.of(1, 2, 3);
    console.log(arr); // [1, 2, 3]
    
  3. push()

    • 向数组的末尾添加一个或多个元素,并返回新的长度。
    let arr = [1, 2, 3];
    arr.push(4);
    console.log(arr); // [1, 2, 3, 4]
    
  4. pop()

    • 从数组的末尾删除最后一个元素,并返回该元素的值。
    let arr = [1, 2, 3];
    arr.pop();
    console.log(arr); // [1, 2]
    
  5. shift()

    • 删除并返回数组的第一个元素。
    let arr = [1, 2, 3];
    arr.shift();
    console.log(arr); // [2, 3]
    
  6. unshift()

    • 向数组的开头添加一个或多个元素,并返回新的长度。
    let arr = [1, 2, 3];
    arr.unshift(0);
    console.log(arr); // [0, 1, 2, 3]
    
  7. splice()

    • 通过删除或替换现有元素或者添加新元素来修改数组,返回被删除的元素。
    let arr = [1, 2, 3, 4];
    arr.splice(2, 1, 'a', 'b');
    console.log(arr); // [1, 2, 'a', 'b', 4]
    
  8. fill()

    • 使用一个固定值填充一个数组中从起始索引到终止索引内的所有元素。
    let arr = [1, 2, 3, 4];
    arr.fill(0, 1, 3);
    console.log(arr); // [1, 0, 0, 4]
    
  9. copyWithin()

    • 在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。
    let arr = [1, 2, 3, 4, 5];
    arr.copyWithin(0, 3, 4);
    console.log(arr); // [4, 2, 3, 4, 5]
    

查找和遍历数组

  1. indexOf()

    • 返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。
    let arr = [2, 5, 9];
    console.log(arr.indexOf(2)); // 0
    console.log(arr.indexOf(7)); // -1
    
  2. lastIndexOf()

    • 返回在数组中可以找到一个给定元素的最后一个索引,如果不存在,则返回-1。
    let arr = [2, 5, 9, 5];
    console.log(arr.lastIndexOf(5)); // 3
    
  3. find()

    • 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined
    let arr = [1, 2, 3, 4];
    console.log(arr.find(x => x > 2)); // 3
    
  4. findIndex()

    • 返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
    let arr = [1, 2, 3, 4];
    console.log(arr.findIndex(x => x > 2)); // 2
    
  5. every()

    • 测试数组的所有元素是否都通过了指定函数的测试。
    let arr = [1, 2, 3, 4];
    console.log(arr.every(x => x > 0)); // true
    
  6. some()

    • 测试数组中的某些元素是否通过了指定函数的测试。
    let arr = [1, 2, 3, 4];
    console.log(arr.some(x => x > 3)); // true
    
  7. forEach()

    • 为数组中的每个元素执行一次提供的函数。
    let arr = [1, 2, 3, 4];
    arr.forEach(x => console.log(x));
    // 输出: 1 2 3 4
    
  8. map()

    • 创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
    let arr = [1, 2, 3, 4];
    let newArr = arr.map(x => x * 2);
    console.log(newArr); // [2, 4, 6, 8]
    
  9. filter()

    • 创建一个新数组,其包含通过所提供函数实现的测试的所有元素。
    let arr = [1, 2, 3, 4];
    let newArr = arr.filter(x => x > 2);
    console.log(newArr); // [3, 4]
    
  10. reduce()

    • 对数组中的每个元素执行一个提供的函数(升序执行),将其结果汇总为单个返回值。
    let arr = [1, 2, 3, 4];
    let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
    console.log(sum); // 10
    

其他数组操作

  1. concat()

    • 用于合并两个或多个数组。此方法不会改变现有数组,而是返回一个新数组。
    let arr1 = [1, 2, 3];
    let arr2 = [4, 5, 6];
    let newArr = arr1.concat(arr2);
    console.log(newArr); // [1, 2, 3, 4, 5, 6]
    
  2. slice()

    • 返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝。
    let arr = [1, 2, 3, 4, 5];
    let newArr = arr.slice(1, 3);
    console.log(newArr); // [2, 3]
    
  3. flat()

    • 将一个多维数组降维成一个一维数组。可以指定降维的层级。
    let arr = [1, [2, [3, [4, 5]]]];
    console.log(arr.flat(3)); // [1, 2, 3, 4, 5]
    
  4. flatMap()

    • 首先使用映射函数映射每个元素,然后将结果展平成一个新数组。
    let arr = [1, 2, 3, 4];
    let newArr = arr.flatMap(x => [x, x * 2]);
    console.log(newArr); // [1, 2, 2, 4, 3, 6, 4, 8]
    
  5. sort()

    • 对数组的元素进行排序并返回数组。排序可以是数字或字符串。
    let arr = [4, 2, 7, 1];
    arr.sort((a, b) => a - b);
    console.log(arr); // [1, 2, 4, 7]
    
原文出处: 内容源于AI仅供参考,请勿使用于商业用途。如若转载请注明原文及出处。
出处地址:http://www.07sucai.com/tech/300.html
版权声明:本文来源地址若非本站均为转载,若侵害到您的权利,请及时联系我们,我们会在第一时间进行处理。

今日推荐

如何判断一个函数是普通函数还是构造函数
字面量创建对象和 new 创建对象的区别
怎么查看 windows 和 Linux 的日志
UniApp 如何处理图片上传?
ajax运行流程及原理详解
js 有哪些方法改变 this 指向?
UniApp 如何与原生代码交互?
UniApp 如何处理路由守卫?